<template>
	<v-popup v-model:value="isPopupVisible" :title="title" :scrollHeight="400" model="square" @close="handleClose">
		<view class="drum-select-container">
			<view class="drum-select-content">
				<v-scroll-list :options="options" v-model="selectedValue" :scroll-height="scrollHeight" :item-height="itemHeight" @update:value="handleValueUpdate" />
			</view>
		</view>
	</v-popup>
</template>

<script lang="ts" setup>
import { ref, watch, inject } from 'vue';

interface DrumSelectPicker {
	value: any;
	label: string;
}

const props = defineProps({
	title: {
		type: String,
		default: '选择选项'
	},
	scrollHeight: {
		type: Number,
		default: 300
	},
	options: {
		type: Array,
		default: () => [],
		required: true
	},
	value: {
		type: [String, Number],
		default: ''
	},
	show: {
		type: Boolean,
		default: false
	},
	itemHeight: {
		type: Number,
		default: 80
	}
});

const emit = defineEmits(['update:value', 'close']);

const isPopupVisible = ref(props.show);
const selectedValue = ref(props.value);
const config = inject<any>('config');

watch(
	() => props.value,
	(newVal) => {
		selectedValue.value = newVal;
	}
);

function openPopup() {
	isPopupVisible.value = true;
}

function handleClose() {
	isPopupVisible.value = false;
	emit('close');
}

function handleValueUpdate(value: any) {
	emit('update:value', value);
}
</script>

<style lang="scss" scoped>
.drum-select-container {
	padding: 20rpx;
}

.drum-select-content {
	max-height: 500rpx;
	overflow: hidden;
}
</style>
